/*
 * 布局样式逻辑
 * @params {
 *  handleGetStyle function 获取样式
 * }
 */
import { addClass, removeClass } from '@/utils/domUtils'
const userAlLayoutStyleEffect = function (handleGetStyle) {
    // 添加自定义样式
    function handleAddCousomsStyle() {
        handleRemoveCousomsStyle()
        const ele = document.createElement('style')
        ele.setAttribute('type', 'text/css') // 设置
        ele.setAttribute('al-layout-custom', 'style')
        // testEle.getAttribute("test")； //获取
        ele.innerHTML = handleGetStyle()
        document.getElementsByTagName('head')[0].appendChild(ele)
        // 添加自定义样式,给body加class使一些自定义样式生效
        addClass(document.body, 'al-layout-custom-new')
    }
    function handleRemoveCousomsStyle() {
        // 稳了自定义样式,给body去class使一些自定义样式失效
        removeClass(document.body, 'al-layout-custom-new')
        let customDom = document.querySelector(`[al-layout-custom="style"]`)
        if (customDom && customDom.parentNode) {
            customDom.parentNode.removeChild(customDom)
            customDom = null
        }
    }
    function getContentStyle(content: any) {
        if (!content) {
            return ''
        }
        return `
          /**内容区**/
          .al-layout-theme-custom .@{ant-prefix}-layout-footer {
            background: ${content.backgroundColor};
            color: ${content.textColor};
          }
          .al-layout-theme-custom .@{ant-prefix}-btn-primary,
          .al-layout-theme-custom .@{ant-prefix}-btn-primary:hover,
          .al-layout-theme-custom .@{ant-prefix}-btn-primary:focus,
          .al-layout-theme-custom .@{ant-prefix}-btn-primary:active,
          .al-layout-theme-custom .@{ant-prefix}-btn-primary.active
          {
            border-color: ${content.selectedColor};
            background-color: ${content.selectedColor};
            box-shadow: none;
          }
          .al-layout-theme-custom .@{ant-prefix}-btn,
          .al-layout-theme-custom .@{ant-prefix}-btn:hover,
          .al-layout-theme-custom .@{ant-prefix}-btn:focus,
          .al-layout-theme-custom .@{ant-prefix}-btn:active,
          .al-layout-theme-custom .@{ant-prefix}-btn.active{
            border-color: ${content.selectedColor};
            background-color: ${content.selectedColor};
          }
          .al-layout-theme-custom.al-layout-comprehensive .al-layout-container,
          .al-layout-theme-custom.al-layout-vertical .al-layout-container,
          .al-layout-theme-custom.al-layout-horizontal .al-layout-container {
            background: ${content.backgroundColor}
          }
          .al-layout-theme-custom .@{ant-prefix}-pagination-prev:focus .@{ant-prefix}-pagination-item-link,
          .al-layout-theme-custom .@{ant-prefix}-pagination-next:focus .@{ant-prefix}-pagination-item-link,
          .al-layout-theme-custom .@{ant-prefix}-pagination-prev:hover .@{ant-prefix}-pagination-item-link,
          .al-layout-theme-custom .@{ant-prefix}-pagination-next:hover .@{ant-prefix}-pagination-item-link {
            border-color: ${content.selectedColor};
            background-color: ${content.selectedColor};
          }
          .al-layout-theme-custom .@{ant-prefix}-select-selection:hover{
            border-color: ${content.selectedColor};
          }
          .al-layout-theme-custom.@{ant-prefix}-layout{
            background-color: ${content.backgroundColor};
          }
          .al-layout-theme-custom .@{ant-prefix}-card{
            background-color: ${content.backgroundColor};
          }
          .al-layout-theme-custom .@{ant-prefix}-table-tbody > tr > td > .@{ant-prefix}-btn> span {
            color: ${content.selectedColor};
          }
      `
    }

    return {
        handleAddCousomsStyle,
        handleRemoveCousomsStyle,
        getCotentStyle: getContentStyle
    }
}
export default userAlLayoutStyleEffect
